<template>
  <div class="body">
    <h3>基本情况</h3>
    <p><i>*</i>所属批次:</p>
    <div class="batch">2024批次</div>
    <p><i>*</i>项目名称:</p>
    <el-input
      v-model="input"
      style="width: 100%"
      placeholder="项目名称"
      size="large"
      class="partition"
    />
    <div class="select">
      <div>
        <p><i>*</i>项目类型:</p>
        <el-select
          v-model="type"
          placeholder="请选择项目类型"
          style="width: 100%"
          size="large"
          class="partition"
        >
          <el-option
            v-for="item in optionsType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </div>
      <div>
        <p><i>*</i>项目级别:</p>
        <el-select
          v-model="level"
          placeholder="请选择项目级别"
          style="width: 100%"
          size="large"
          class="partition"
        >
          <el-option
            v-for="item in optionsLevel"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </div>
      <div>
        <p>项目类别:</p>
        <el-select
          v-model="category"
          placeholder="请选择项目类别"
          style="width: 100%"
          size="large"
          class="partition"
        >
          <el-option
            v-for="item in optionsCategory"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </div>
      <div>
        <p>所属重点领域:</p>
        <el-select
          v-model="field"
          placeholder="请选择所属重点领域"
          style="width: 100%"
          size="large"
          class="partition"
        >
          <el-option
            v-for="item in optionsField"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </div>
      <div>
        <p><i>*</i>所属一级学科:</p>
        <el-select
          v-model="FirstDiscipline"
          placeholder="请选择一级学科"
          style="width: 100%"
          size="large"
          class="partition"
        >
          <el-option
            v-for="item in optionsFirstDiscipline"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </div>
      <div>
        <p><i>*</i>所属二级学科:</p>
        <el-select
          v-model="SecondaryDiscipline"
          filterable
          remote
          reserve-keyword
          placeholder="请选择二级学科"
          remote-show-suffix
          :remote-method="remoteMethod"
          :loading="loading"
          style="width: 100%"
          size="large"
        >
          <el-option
            v-for="item in optionsSecondaryDiscipline"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div>
        <p><i>*</i>项目来源名称:</p>
        <el-select
          v-model="SourceName"
          placeholder="请选择项目来源名称"
          style="width: 100%"
          size="large"
          class="partition"
        >
          <el-option
            v-for="item in optionsSourceName"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </div>
      <div>
        <p><i>*</i>项目期限:</p>
        <el-select
          v-model="term"
          placeholder="去选择项目期限"
          style="width: 100%"
          size="large"
          class="partition"
        >
          <el-option
            v-for="item in optionsTerm"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </div>
    </div>
    <p><i>*</i>第一主持人账号:</p>
    <div class="batch">2151300123</div>
    <p><i>*</i>项目简介:</p>
    <el-input
      v-model="textarea"
      maxlength="300"
      style="width: 100%"
      placeholder="项目简介"
      show-word-limit
      type="textarea"
      rows="8"
      class="partition"
    />
    <p><i>*</i> 负责人曾经参与科研的情况:</p>
    <!-- <MyEditor></MyEditor> -->
    <el-input
      v-model="textarea"
      maxlength="300"
      style="width: 100%"
      placeholder="负责人曾经参与科研的情况"
      show-word-limit
      type="textarea"
      rows="8"
      class="partition"
    />
    <div class="partition"></div>
    <p><i>*</i> 指导教师承担科研课题情况:</p>
    <!-- <MyEditor></MyEditor> -->
    <el-input
      v-model="textarea"
      maxlength="300"
      style="width: 100%"
      placeholder="指导教师承担科研课题情况"
      show-word-limit
      type="textarea"
      rows="8"
      class="partition"
    />
    <div class="partition"></div>
    <p><i>*</i> 指导教师对本项目的支持情况:</p>
    <!-- <MyEditor></MyEditor> -->
    <el-input
      v-model="textarea"
      maxlength="300"
      style="width: 100%"
      placeholder="指导教师对本项目的支持情况"
      show-word-limit
      type="textarea"
      rows="8"
      class="partition"
    />
    <div class="partition"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// import MyEditor from '@/components/MyEditor.vue'

const input = ref('')

//选择内容
const type = ref('')
const level = ref('')
const category = ref('')
const field = ref('')
const FirstDiscipline = ref('')
const SecondaryDiscipline = ref([])
const SourceName = ref('')
const term = ref('')

const textarea = ref('')

const optionsType = [
  {
    value: '创新训练项目',
    label: '创新训练项目'
  },
  {
    value: '创业训练项目',
    label: '创业训练项目'
  },
  {
    value: '创业实践项目',
    label: '创业实践项目'
  }
]
const optionsLevel = [
  {
    value: '国家级',
    label: '国家级'
  },
  {
    value: '省级',
    label: '省级'
  }
]
const optionsCategory = [
  {
    value: '一般项目',
    label: '一般项目'
  },
  {
    value: '重点支持领域项目',
    label: '重点支持领域项目'
  }
]
const optionsField = [
  {
    value: '基础学科',
    label: '基础学科'
  },
  {
    value: '新工科',
    label: '新工科'
  },
  {
    value: '新医科',
    label: '新医科'
  },
  {
    value: '新农科',
    label: '新农科'
  },
  {
    value: '新文科',
    label: '新文科'
  }
]
const optionsFirstDiscipline = [
  {
    value: '哲学',
    label: '哲学'
  },
  {
    value: '经济学',
    label: '经济学'
  },
  {
    value: '法学',
    label: '法学'
  },
  {
    value: '教育学',
    label: '教育学'
  },
  {
    value: '文学',
    label: '文学'
  },
  {
    value: '历史学',
    label: '历史学'
  },
  {
    value: '理学',
    label: '理学'
  },
  {
    value: '工学',
    label: '工学'
  },
  {
    value: '农学',
    label: '农学'
  },
  {
    value: '医学',
    label: '医学'
  },
  {
    value: '管理学',
    label: '管理学'
  },
  {
    value: '艺术学',
    label: '艺术学'
  }
]
const optionsSourceName = [
  {
    value: 'A、学生自主选题，来源于自己对课题的长期积累与兴趣',
    label: 'A、学生自主选题，来源于自己对课题的长期积累与兴趣'
  },
  {
    value: 'B、学生来源于教师科研项目选题',
    label: 'B、学生来源于教师科研项目选题'
  },
  {
    value: 'C、学生承担社会、企业委托项目选题',
    label: 'C、学生承担社会、企业委托项目选题'
  },
  {
    value: 'D、拔尖专项',
    label: 'D、拔尖专项'
  },
  {
    value: 'E、竞赛专项',
    label: 'E、竞赛专项'
  },
  {
    value: 'F、研修专项',
    label: 'F、研修专项'
  }
]
const optionsTerm = [
  {
    value: '一年期',
    label: '一年期'
  },
  {
    value: '两年期',
    label: '两年期'
  }
]

const list = ref([])
const optionsSecondaryDiscipline = ref([])
const loading = ref(false)

onMounted(() => {
  list.value = states.map((item) => {
    return { value: `${item}`, label: `${item}` }
  })
})

const remoteMethod = (query) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      optionsSecondaryDiscipline.value = list.value.filter((item) => {
        return item.label.toLowerCase().includes(query.toLowerCase())
      })
    }, 200)
  } else {
    optionsSecondaryDiscipline.value = []
  }
}

const states = [
  'Alabama',
  'Alaska',
  'Arizona',
  'Arkansas',
  'California',
  'Colorado',
  'Connecticut',
  'Delaware',
  'Florida',
  'Georgia',
  'Hawaii',
  'Idaho',
  'Illinois',
  'Indiana',
  'Iowa',
  'Kansas',
  'Kentucky',
  'Louisiana',
  'Maine',
  'Maryland',
  'Massachusetts',
  'Michigan',
  'Minnesota',
  'Mississippi',
  'Missouri',
  'Montana',
  'Nebraska',
  'Nevada',
  'New Hampshire',
  'New Jersey',
  'New Mexico',
  'New York',
  'North Carolina',
  'North Dakota',
  'Ohio',
  'Oklahoma',
  'Oregon',
  'Pennsylvania',
  'Rhode Island',
  'South Carolina',
  'South Dakota',
  'Tennessee',
  'Texas',
  'Utah',
  'Vermont',
  'Virginia',
  'Washington',
  'West Virginia',
  'Wisconsin',
  'Wyoming'
]
</script>

<style lang="less" scoped>
.body {
  margin: 20px 100px;
  padding: 30px 40px;
  h3 {
    color: #196adc;
    margin-bottom: 20px;
  }
  p {
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 20px;
    i {
      color: red;
      margin-right: 5px;
    }
  }
  .batch {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #eef1f5;
    border: 1px solid #e2e5ec;
    border-radius: 5px;
    padding: 0 10px;
    font-size: 14px;
    color: #495057;
    margin-bottom: 40px;
  }
  .partition {
    margin-bottom: 40px;
  }
  .select {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    div {
      width: 48%;
    }
  }
}
</style>
